
<div class="col-md-12">

    <h3 class="header smaller lighter blue">
        <a>OverloadKeeperContainer</a>
        <span ng-if="operateType == 'migrating'"> >> 迁移中  </span>
    </h3>

    <div class="panel panel-primary">
        <header class="panel-heading">
            <div class="row">
                <div class="col-md-6">
                    <td ng-if="operateType == 'detail'">
                        <input ng-if="operateType == 'detail'" type="checkbox" ng-click="toggleAll()">
                    </td>
                    <span ng-if="isChecked() && operateType == 'detail'">取消全选</span> <span ng-if="!isChecked() && operateType == 'detail'">全选</span>
                </div>
                <div class="col-md-6 text-right">
                    <a class="btn btn-danger" type="button" ng-click="migrateKeeperTaskTerminate()">
                        终止任务
                    </a>
                    <a ng-if="operateType == 'detail'"  class="btn btn-danger" type="button" ng-click="beginToMigrateOverloadKeeperContainers()">
                        迁移
                    </a>
                </div>
            </div>
        </header>

        <div ng-show="operateType == 'detail'" >
            <table ng-table="tableParams" show-filter="true" class="table table-striped table-hover">
                <tr ng-repeat-start="info in $data">
                    <td data-title="'确认框'"></td>
                    <td>
                        <input type="checkbox"  ng-checked="info.selected" ng-click="info.selected = !info.selected">
                    </td>

                    <td data-title="'ip'" filter="{ 'srcKeeperContainer.keeperIp': 'text'}">{{info.srcOverLoadKeeperPairIp == null ? info.srcKeeperContainer.keeperIp : info.srcKeeperContainer.keeperIp + " <=> (" + info.srcOverLoadKeeperPairIp + ")"}}</td>
                    <td data-title="'dc'" filter="{ 'srcKeeperContainer.dcName': 'text'}">{{info.srcKeeperContainer.dcName}}</td>
                    <td data-title="'上游redis数据量(GB)'" sortable="'srcKeeperContainer.activeRedisUsedMemory'">{{info.srcKeeperContainer.activeRedisUsedMemory/1024/1024/1024| number:2}}</td>
                    <td data-title="'流量(KB/s)'" sortable="'srcKeeperContainer.activeInputFlow'">{{info.srcKeeperContainer.activeInputFlow}}</td>
                    <td data-title="'待迁移分片数'" sortable="'migrateKeeperCount'">{{info.migrateKeeperCount}}</td>
                    <td data-title="'tagetKeeperContainer'" >{{info.targetKeeperContainer.keeperIp}}</td>
                    <td data-title="'上游redis数据量(GB)'" sortable="'targetKeeperContainer.activeRedisUsedMemory'">{{info.targetKeeperContainer.activeRedisUsedMemory/1024/1024/1024 | number:2}}</td>
                    <td data-title="'流量(KB/s)'" sortable="'srcKeeperContainer.activeInputFlow'">{{info.targetKeeperContainer.activeInputFlow}}</td>
                    <td data-title="'超载原因'" filter="{ 'cause': 'text'}">{{info.cause}}</td>
                    <td data-title="'迁移方案'" filter="{ 'result': 'text'}">{{info.result}}</td>
                    <td data-title="'生成时间'" sortable="'updateTime'">{{info.time}}</td>
                    <td data-title="'待迁移分片详情'">
                        <div class="action-buttons">
                            <a href="javascript:void(0)" class="green bigger-140 show-details-btn"
                               title="Show Details" ng-click="info.showDetail = !info.showDetail">
                                <i ng-show="!info.showDetail" class="ace-icon fa fa-angle-double-down blue"></i>
                                <i ng-show="info.showDetail" class="ace-icon fa fa-angle-double-up blue"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                <tr ng-repeat-end ng-show="info.showDetail">
                    <td colspan="6" class="text-left">
                        <ul class="list-unstyled spaced">
                            <li ng-repeat="shard in info.migrateShards">
                                <i class="ace-icon fa fa-caret-right purple"></i>
                                {{shard.dcId}}:{{shard.clusterId}}:{{shard.shardId}}
                            </li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>


        <div ng-show="operateType !== 'detail'" >
            <table ng-table="migratingTableParams" show-filter="true" class="table table-striped table-hover">
                <tr ng-repeat-start="info in $data">
                    <td data-title="'srcKeeperContainer'" filter="{ 'srcKeeperContainer.keeperIp': 'text'}">{{info.srcKeeperContainer.keeperIp}}</td>
                    <td data-title="'idc'" >{{info.srcKeeperContainer.dcName}}</td>
                    <td data-title="'tagetKeeperContainer'" >{{info.targetKeeperContainer.keeperIp}}</td>
                    <td data-title="'待迁移的分片数'" >{{info.migrateKeeperCount}}</td>
                    <td data-title="'迁移完成分片数'" >{{info.migrateKeeperCompleteCount}}</td>
                    <td data-title="'详情'">
                        <div class="action-buttons">
                            <a href="javascript:void(0)" class="green bigger-140 show-details-btn"
                               title="Show Details" ng-click="info.showDetail = !info.showDetail">
                                <i ng-show="!info.showDetail" class="ace-icon fa fa-angle-double-down blue"></i>
                                <i ng-show="info.showDetail" class="ace-icon fa fa-angle-double-up blue"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                <tr ng-repeat-end ng-show="info.showDetail">
                    <td colspan="6" class="text-left">
                        <ul class="list-unstyled spaced">
                            <li ng-if="info.migratingShard !== null && info.migratingShard !== ''">
                                <i class="fa fa-spinner fa-spin blue"></i>
                                {{info.migratingShard.dcId}}:{{info.migratingShard.clusterId}}:{{info.migratingShard.shardId}}
                            </li>
                            <li ng-repeat="shard in info.failedShards">
                                <i class="glyphicon glyphicon-remove-sign red"></i>
                                {{shard.dcId}}:{{shard.clusterId}}:{{shard.shardId}}
                            </li>
                            <li ng-repeat="shard in info.finishedShards">
                                <i class="glyphicon glyphicon-ok-sign green"></i>
                                {{shard.dcId}}:{{shard.clusterId}}:{{shard.shardId}}
                            </li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>

    </div>
</div>

<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="icon-double-angle-up icon-only bigger-110"></i>
</a>
